<template>
	<view class="userinfo-container">
		<!-- 头像和昵称区域 -->
		<view class="top-box" :style="{backgroundImage:img,backgroundSize:'cover'}">
			<image :src="userinfo.avatarUrl||icon" mode="" class="avatar"></image>

			<view class="nikname">{{userinfo.nickName||'IKUN'}}</view>

		</view>
		<!-- 画板区域 -->
		<view class="panel-list">
			<!-- 第一个面板 -->
			<view class="panel">
				<view class="panel-body">
					<view class="panel-item">
						<text>8</text>
						<text>收藏的店铺</text>
					</view>
					<view class="panel-item">
						<text>14</text>
						<text>收藏的商品</text>
					</view>
					<view class="panel-item">
						<text>18</text>
						<text>关注的商品</text>
					</view>
					<view class="panel-item">
						<text>84</text>
						<text>足迹</text>
					</view>
				</view>
			</view>
			<!-- 第二个面板 -->
			<view class="panel">
				<view class="panel-title">
					我的订单
				</view>
				<view class="panel-body">
					<view class="panel-item">
						<image src="/static/my-icons/icon1.png" class="icon"></image>
						<text>待付款</text>
					</view>
					<view class="panel-item">
						<image src="/static/my-icons/icon2.png" class="icon"></image>
						<text>待收货</text>
					</view>
					<view class="panel-item">
						<image src="/static/my-icons/icon3.png" class="icon"></image>
						<text>退款/退货</text>
					</view>
					<view class="panel-item">
						<image src="/static/my-icons/icon4.png" class="icon"></image>
						<text>全部订单</text>
					</view>
				</view>
			</view>
			<!-- 第三个面板 -->
			<view class="panel">
				<view class="panel-item-list" @click="gotoUser">
					<view class="panel-item-list-icon">
						<text class="iconfont icon-gerenxinxi"></text>
						<text class="icon-text">修改个人信息</text>
					</view>
					<uni-icons type="arrowright" size="20"></uni-icons>
				</view>
				<view class="panel-item-list">
					<view class="panel-item-list-icon">
						<text class="iconfont icon-shouhuodizhi"></text>
						<text class="icon-text">收货地址</text>
					</view>
					<uni-icons type="arrowright" size="20"></uni-icons>
				</view>
				<view class="panel-item-list">
					<view class="panel-item-list-icon">
						<text class="iconfont icon-LIVECHAT"></text>
						<text class="icon-text">联系客服</text>
					</view>
					<uni-icons type="arrowright" size="20"></uni-icons>
				</view>
				<view class="panel-item-list" @click="logout">
					<view class="panel-item-list-icon">
						<text class="iconfont icon-denglu"></text>
						<text class="icon-text">退出登录</text>
					</view>

					<uni-icons type="arrowright" size="20"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		name: "my-userinfo",
		data() {
			return {
				img: "url(http://mms2.baidu.com/it/u=4076631910,91640573&fm=253&app=120&f=JPEG&fmt=auto&q=75?w=651&h=356)",
				// img: "url(https://img2.baidu.com/it/u=89617423,3555847413&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500)",
				icon: 'http://mms2.baidu.com/it/u=2541259901,1225815324&fm=253&app=138&f=JPEG&fmt=auto&q=75?w=500&h=500'
			};
		},
		computed: {
			...mapState('m_user', ['userinfo'])
		},
		methods: {
			...mapMutations('m_user', ['updateAddress', 'updateUserInfo', 'updateToken', 'updateRedirectInfo']),
			// 1.修改个人信息的方法:
			gotoUser() {
				uni.navigateTo({
					// 跳转到详情页
					url: '/subpkg/goods_user/goods_user',
					success: () => {
						this.updateRedirectInfo({
							// 跳转的方式
							openType: 'navigateTo',
							// 从哪个页面跳转过去的
							from: '/pages/my/my'
						})
					}
				})
			},
			// 2.退出登录的方法:
			async logout() {
				const [err, succ] = await uni.showModal({
					title: '提示',
					content: '确定退出登录吗？'
				}).catch(err => err)
				if (succ && succ.confirm) {
					this.updateAddress({})
					this.updateUserInfo({})
					this.updateToken('')
				}
			}
		}
	}
</script>

<style lang="scss">
	.userinfo-container {
		height: 100%;
		background-color: #F4F4F4;

		.top-box {
			height: 400rpx;
			// background-color: #FFF;
			display: flex;
			// flex-direction: column;
			justify-content: space-between;
			align-items: center;

			.avatar {
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
				border: 4rpx solid #FFF;
				box-shadow: 0px 0px 20px #DDDDDD;
				margin: 0 40rpx;
			}


			.nikname {
				font-size: 32rpx;
				font-weight: 700;
				margin-right: 90rpx;
				background-image: -moz-linear-gradient(90deg, rgb(255, 199, 214), rgb(192, 173, 255));
				background-image: -webkit-linear-gradient(90deg, rgb(255, 199, 214), rgb(192, 173, 255));
				background-image: linear-gradient(90deg, rgb(255, 199, 214), rgb(192, 173, 255));
				/* 设置背景色渐变 */
				// background-image: linear-gradient(to right, #51D88F, #31BDD0);
				/* 设置背景以文字进行裁切 */
				background-clip: text;
				-webkit-background-clip: text;
				/* 设置文本颜色透明以露出后面裁切成文本形状的渐变背景 */
				color: transparent;
			}

		}
	}

	.panel-list {
		padding: 0 20rpx;
		position: relative;
		top: -30rpx;

		.panel {
			background-color: #FFF;
			border-radius: 8rpx;
			margin-bottom: 16rpx;
			box-shadow: 0px 0px 20px #DDDDDD;

			.panel-title {
				line-height: 90rpx;
				margin: 0 20rpx;
				font-size: 30rpx;
				border-bottom: 2rpx solid #EBEEF5;
			}

			.panel-body {
				display: flex;
				justify-content: space-around;

				.panel-item {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;
					font-size: 26rpx;
					padding: 20rpx 0;

					.icon {
						width: 70rpx;
						height: 70rpx;
					}
				}
			}

			.panel-item-list {
				height: 45px;
				line-height: 90rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 20rpx;

				.icon-text {
					margin-left: 5px;
				}
			}
		}
	}
</style>
